<template>
	<view class="topContains">
		<scroll-view scroll-y  @scroll="handleScroll" style="height: 99vh;">
			<view class="px-4">
				<u-sticky customNavHeight='0'>
					<u-navbar @leftClick="leftClick" @rightClick="rightClick" :title="textBar" height='48' bgColor="#D7E6FB"
						:placeholder="true" rightText="举报反馈" leftIconColor="#000" />
				</u-sticky>
				<view class="center d-flex align-center">
					<text class="font-bold font-15" v-if="orderDetailData.orderDetailList">{{orderDetailData.orderDetailList[0].serviceName}}</text>
						<u-tag text="准时" type="warning" size="mini"></u-tag>
						<u-tag v-if="orderDetailData.source==3" text="商家" type="error" size="mini"></u-tag>	
						<u-tag v-if="orderDetailData.source==1" text="总包" type="error" size="mini"></u-tag>	
						<u-tag v-if="orderDetailData.source==2" text="家庭" type="error" size="mini"></u-tag>
						<u-tag v-if="orderDetailData.source==0" text="其他" type="error" size="mini"></u-tag>
				</view>
				<view class="my-2 px-2 d-flex align-center bg-white rounded-5 py-1">
					<u-icon name="error-circle" size="12" color="#fBAC00"></u-icon>
					<text class="font-10 color333 ml-1">您的日均报价单量少于10单，多报价有利于提升指派率~</text>
				</view>
				<view class="center-two bg-white rounded-5 pa-2">
					<view class="d-flex justify-space-between">
						<text class="font-14">服务信息</text>
						<text class="colorb2 font-12">总数 {{quantityAll}}</text>
					</view>
					<view v-for="(item,index) in orderDetailData.orderDetailList" :key="index">
						<view class="center-two-img d-flex align-start my-2">
							<u--image :src="item.images" width="80px" height="80px"
								radius="6"></u--image>
							<view class="font-14 font-bold ml-2">
								<text>{{item.serviceName}}</text>
								<text class="colorF47E3F ml-2">x{{item.quantity}}处</text>
							</view>
						</view>
						<view class="d-flex font-weight-500 font-13">
							<text class="colorb2">维修信息</text>
							<text class="color000 ml-2">{{formatProductAttr(item.specification)}}</text>
						</view>
						<view class="center-two-describe rounded-5 pa-2 font-13 my-2">
							<view class="colorF47E3F">
								故障描述
							</view>
							<view class="color000">
								{{item.requirement}}
							</view>
						</view>
					</view>
				</view>
				<view class="center-three bg-white rounded-5 pa-2 my-2">
					<view class="font-14 color000 font-bold">
						<text>订单要求</text>
						<text class="font-12 colorb2 ml-2 font-weight-500">(请仔细阅读\严格按照要求服务)</text>
					</view>
					<view class="font-14 color000 mt-2 mb-1">
						<text class="colorb2 font-13 mr-2">期望时间</text>
						<text class="font-14" v-if="orderDetailData.expectedTimeScope!=''">在{{orderDetailData.expectedDate | timetrans(2)}}{{orderDetailData.expectedTimeScope}}上门服务</text>
						<text class="font-14" v-else>上门时间与客户协商</text>
					</view>
					<view v-if="orderDetailData.orderRequirement" class="rounded-5 pa-2 font-13 my-2" style="background-color: #FFF7F5;">
						<!-- <view class="colorF47E3F">
							订单要求说明
						</view> -->
						<view class="color000">
							{{orderDetailData.orderRequirement}}
						</view>
					</view>
				</view>
				<view class="center-six bg-white rounded-5 pa-2 my-2">
					<view class="font-14 color000 font-bold">
						客户信息
					</view>
					<view class="center-six-map bg-f7 pa-2 rounded-5 my-2">
						<view class="d-flex align-center colorb2">
							<u-tag text="客" type="primary" size="mini"></u-tag>
							<text class="ml-2 font-10">***</text>
						</view>
						<view class="ml-8">
							<view class="d-flex align-center mt-1">
								<view class="font-12 color000 font-weight-500">
									{{orderDetailData.userAddress}}
									<text class="color-primary font-11 ml-2" @click="copyfuncId(orderDetailData.userAddress)">复制</text>
								</view>
								<u-icon name="map-fill" size="20" class="mx-2"></u-icon>
							</view>
							<view class="mt-1">
								<u-icon name="map" size="16" style="display: inline-block;"></u-icon>
								<text class="font-12 colorb2">距您常住地直线约 {{Math.round(orderDetailData.distance)}} 公里(仅供参考)</text>
							</view>
						</view>
					</view>
				</view>
				<view class="center-five bg-white rounded-5 pa-2 my-2">
					<view class="font-14 color000 font-bold">
						订单信息
					</view>
					<view class="center-five-gap d-flex align-center font-13 my-2">
						<text class="colorb2 mr-1">订单编号</text>
						<text>{{orderDetailData.orderNo}}</text>
						<text class="rounded-5 colorb2 px-1 cory font-12" @click="copyfuncId(orderDetailData.orderNo)">复制</text>
					</view>
					<view class="center-five-gap d-flex align-center font-13 my-2">
						<text class="colorb2 mr-1">下单用户</text>
						<text>{{orderDetailData.customerId}}</text>
						<u-tag v-if="orderDetailData.source==3" text="商家" type="error" size="mini"></u-tag>	<u-tag v-if="orderDetailData.source==1" text="总包" type="error" size="mini"></u-tag>	<u-tag v-if="orderDetailData.source==2" text="家庭" type="error" size="mini"></u-tag>
						<text class="colorb2">指派率-较高</text>
					</view>
				</view>
				<view class="center-five bg-white rounded-5 pa-2 my-2">
					<view class="d-flex align-center justify-space-between mb-4" @click="serveShow=true">
						<text class="color333 font-12">服务质保期</text>
						<view class="d-flex align-center font-10 colorb2">
							<text>{{orderDetailData.warrantyPeriod}}天</text>
							<u-icon name="arrow-right" size="10"></u-icon>
						</view>
					</view>
					<view class="d-flex align-center justify-space-between">
						<text class="color333 font-12">服务承若</text>
						<view class="d-flex align-center font-10 colorb2">
							<u-icon name="arrow-right" size="10"></u-icon>
						</view>
					</view>
				</view>
				<view class="my-4 mb-10 text-center font-14 color000 pb-15">
					<text>遇到问题?</text>
					<text class="color-primary ml-2" @click="rightClick">点这里 ></text>
				</view>
				<!-- 订单 -->
				<!-- 		<view class="mt-16">
		  <u-empty mode="order" text="暂无今日待办订单,快去接单吧" textSize="12" textColor="#999">
		  </u-empty>
		  <view class="colorb2 font-12 mt-4 px-4 text-center">
		   <u-button
		    @click="toIndex"
		     class="custom-style"
		     type="primary"
		     :plain="true"
		     :hairline="true"
		     text="去接单"
		   ></u-button>
		  </view>
		</view>
		 -->
			</view>
		</scroll-view>
		<view class="bootomBtn bg-white py-2 px-4">
			<view class="d-flex align-center justify-space-between">
				<view class="btn-one font-12 colorb2 d-flex flex-column align-center">
					<u-icon name="heart" size="20"></u-icon>
					<text>不感兴趣</text>
				</view>
				<view class="btn-two font-12 colorb2 d-flex flex-column align-center">
					<u-icon name="heart" size="20"></u-icon>
					<text>服务助手</text>
				</view>
				<view @click="submitoffer" :class="isShowBtn?'opacity6':''" class="btn-three font-12">
					<view class="d-flex align-center justify-center">
						<text class="colorfff">马上报价</text>
						<u-count-down v-if="isShowBtn" :time="4*1000" format="ss" @change="onChange">
							<view class="colorfff ml-1">
								( {{ seconds }}s)
							</view>
						</u-count-down>
					</view>
					<view class="colorfff font-10">(剩余{{baojiaNuber}}个名额)</view>
				</view>
			</view>
		</view>
		<!-- 服务说明 -->
		<u-popup :show="serveShow"  mode="center">
			<view class="bg-white rounded-8 pa-4">
				<view class="text-center color000 font-bold font-15">服务质保期说明</view>
				<view class="colorb2 font-13 px-4">
					<view class="my-2">
						{{orderDetailData.warrantyPeriodDesc}}质保({{orderDetailData.warrantyPeriod}}天)
					</view>
				</view>
				<u-button class="mt-6" text="我知道了" type="primary" shape @click="serveShow=false"></u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { getOrderDetailById,getOrderQuoteRemainingNumber } from "@/api/order";
	export default {
		data() {
			return {
				serveShow:false,
				isShowBtn: true,
				seconds: 4,
				chilNalOne: 0,
				childList: [{
						chilName: "待预约",
						chilNal: 0,
					}, {
						chilName: "待上门",
						chilNal: 1,
					},
					{
						chilName: "待完成",
						chilNal: 2,
					},
				],
				textBar:'',
				orderDetailData:{},
				quantityAll:0,
				orderId:'',
				baojiaNuber:0, //报价数量
			};
		},
		onLoad(options) {
			setTimeout(() => {
				this.isShowBtn = false;
			}, 3000)
			if(options.orderId){
				this.orderId = options.orderId;
				this.getOrderDetail(options.orderId);
				this.getOrderNumber(options.orderId);
			}
		},
		methods: {
			// 获取订单状态
			async getOrderDetail(id) {
			  try {
				 const res = await getOrderDetailById({orderId:id});
				 this.orderDetailData = res.data;
				 res.data.orderDetailList.forEach((item,index)=>{
					 this.quantityAll= item.quantity++
				 })
			  } catch (err) {
				 console.log(err);
			  }
			},
			// 获取订单状态
			async getOrderNumber(id) {
			  try {
				 const res = await getOrderQuoteRemainingNumber({orderId:id});
				 this.baojiaNuber= res.data;
			  } catch (err) {
				 console.log(err);
			  }
			},
			handleScroll(e) {
			  if(e.detail.scrollTop>10){
				  this.textBar= "报价详情";
			  }else{
				  this.textBar='';
			  }
			},
			onChange(e) {
				this.seconds = e.seconds
			},
			leftClick() {
				uni.navigateBack()
			},
			rightClick() {
				uni.navigateTo({
					url:'/pages/home/offer/reportFeedback'
				})
			},
			submitoffer() {
				if(this.isShowBtn){
					return false;
				}
				let obj ={
					orderId: this.orderId,
					images: this.orderDetailData.orderDetailList[0].images,
					expectedDate: this.orderDetailData.expectedDate,
					expectedTimeScope: this.orderDetailData.expectedTimeScope,
					quantityAll:this.quantityAll,
				}
				let data = encodeURIComponent(JSON.stringify(obj));
				uni.navigateTo({
					url:'/pages/home/offer/submitOffer?data=' + data,
				})
			},
			formatProductAttr(jsonAttr) {
			  let parsedAttr = JSON.parse(jsonAttr);
			  let attrObj = JSON.parse(parsedAttr.name);
			  let attrStr = "";
			  for (let key in attrObj) {
				 attrStr += key + ": " + attrObj[key] + "; ";
			  }
			  return attrStr.trim();
			},
			copyfuncId(id) {
				uni.setClipboardData({
					data: id,
					showToast: true,
					success() {
						uni.showToast({
							title: '已复制商品ID',
							icon: 'none',
							duration: 2000
						});
					},
					fail(res) {
						uni.showToast({
							icon: 'none',
							title: '复制失败'
						})

					}
				})
			},
		}
	};
</script>

<style lang="scss" scoped>
	::v-deep .u-popup__content {
		border-radius: 16rpx;
		min-width: 600rpx;
		margin: 0 80rpx
	}
	.topContains {
		height: 100vh;
		background-image: linear-gradient(to bottom,
				rgb(215, 230, 251),
				rgb(243, 244, 248));
		overflow: auto;

		.center {
			gap: 12rpx;
		}

		.center-two {
			.center-two-describe {
				background-color: #FFF7F5;
			}
		}

		.center-five {
			.center-five-gap {
				gap: 12rpx;

				.cory {
					border: 1rpx solid #f2f2f2;
				}
			}
		}
	}

	.custom-style {
		color: $u-primary;
		width: 260rpx;
		border-radius: 12rpx;
	}

	.bootomBtn {
		box-sizing: border-box;
		position: fixed;
		width: 100%;
		bottom: 0;

		.btn-one {
			flex: 1;
		}

		.btn-two {
			flex: 1;
		}

		.btn-three {
			background-color: $u-primary;
			padding: 10rpx 0;
			text-align: center;
			border-radius: 16rpx;
			margin: 0 10rpx;
			flex: 3;
		}

		.opacity6 {
			opacity: .6;
		}
	}
</style>